<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
<script>
function delay(ms) {
  return new Promise(function (resolve) {
    setTimeout(() => resolve(), ms)
  })
}
function setColor(color) {
  document.body.style.backgroundColor=color
}
function light() {
  return Promise.resolve()
    .then(() => setColor('red'))
    .then(() => delay(3000))
    .then(() => setColor('yellow'))
    .then(() => delay(2000))
    .then(() => setColor('green'))
    .then(() => delay(1000))
    .then(() => light())
}
light()
</script>